<!-- 业态配置 -->
<template>
  <div class="management-tree">
    <div class="btn-right">
      <el-button v-if="!showChild" type="primary" size="mini" @click="addFn">保存</el-button>
    </div>
    <div class="tree-form">
      <div class="tree-box">
        <el-tree
          ref="menuTree"
          :data="data"
          :props="defaultProps"
          show-checkbox
          node-key="primaryKey"
          @check-change="handleCheckChange"
          :default-checked-keys="isChoseTree" >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ data.catalogName }}</span>
            <span>
              <el-button v-if="data.level!=2" type="text" size="mini" @click.stop="() => update(node, data)">编辑</el-button>
            </span>
          </span>
        </el-tree>
      </div>
      <div class="form-box" v-if="showChild">
        <div class="form-box-item">
          <el-form :model="typeForm" ref="childForm" label-width="100px" size="small" label-position="right">
              <el-col :span="24">
                <el-form-item label="名称" prop="catalogName" :rules="{required: true, message: '业态名称不能为空', trigger: 'blur'}">
                  <el-input  v-model="typeForm.catalogName" disabled> </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="说明" prop="description" :rules="{required: true, message: '业态说明不能为空', trigger: 'blur'}">
                  <el-input  v-model="typeForm.description" disabled> </el-input>
                </el-form-item>
              </el-col>
               <el-col :span="24">
                <el-form-item label="显示名称" prop="categoryAliasName" :rules="{required: true, message: '显示名称不能为空', trigger: 'blur'}">
                  <el-input  v-model="typeForm.categoryAliasName" > </el-input>
                </el-form-item>
              </el-col>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button size="mini" @click="cancel">取 消</el-button>
            <el-button size="mini" type="primary" @click="save('childForm')">保存</el-button>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {categoryDetail,categoryTree,categoryUpdate,categoryCreate} from '../../../api/index'
  export default {
    data() {
      return {
        isChoseTree: [],
        defaultProps:{
          children: 'child',
          label: 'catalogName'
        },
        data:[],
        showChild:false,
        list:[],
        typeForm:{
          catalogName:'',
          description:'',
          categoryAliasName:''
        },
      };
    },

    created() {
      this.getTree()
    },

    methods: {
      async getTree(){
        this.isChoseTree = [];
        let res = await categoryTree({
          bizId:'commercial_rent_main_data',
          bizType:'commercial_rent_main_data',
          catalogTypeList:['business_type','business_type_child'],
          mapBizId:this.$route.query.key,
          status:1
        })
        if(res.rows&&res.rows.length>0){
          this.data =res.rows[0].child
          this.setCheckedFn(this.data)
        }
        setTimeout(() => {
          this.handleCheckChange()
        })
      },
      setCheckedFn (list) {
        list.forEach((item) => {
          if (item.isUsed && (!item.child || item.child.length == 0)) {
            this.isChoseTree.push(item.primaryKey)
          }
          if (item.child && item.child.length > 0) {
            this.setCheckedFn(item.child)
          }
        })
      },
      // 选择树
      handleCheckChange () {
        let res = this.$refs.menuTree.getCheckedNodes(false, true)
        let arr = []
        res.forEach((item) => {
          arr.push({
            categoryId:item.primaryKey,
            bizId:this.$route.query.key,
            bizType:'enterprise',
            categoryAliasName:item.categoryAliasName
          })
        })
        this.list = arr
      },
      async addFn () {
        let res = await categoryCreate({
          flag:true,
          bizId:this.$route.query.key,
          list:this.list
        })
        this.$message.success('保存成功！')
      },
      save(formName){
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            let res =await categoryUpdate(this.typeForm)
            this.$message.success('添加成功！')
            this.cancel()
          }
        });
      },
      async update(node, data){
        this.showChild = true
        Object.keys(this.typeForm).forEach(key => {this.typeForm[key]=null,setTimeout(() => {
          this.$refs.childForm.clearValidate(key)
        }, 0);});
        let res = await categoryDetail({
          categoryId:data.primaryKey,
          bizId:this.$route.query.key
        })
        this.typeForm = Object.assign(this.typeForm,res)
        this.typeForm.bizId=this.$route.query.key
        this.typeForm.bizType='enterprise'
        this.typeForm.categoryId=data.primaryKey
      },
      cancel(){
        this.showChild = false
        Object.keys(this.typeForm).forEach(key => this.typeForm[key]=null);
      }
    },
  };
</script>
<style lang="scss" scoped>
  .btn-right{
    position: absolute;
    top:-50px;
    right: 20px;
  }
  .el-tree {
    position: relative;
    cursor: default;
    background: #FFF;
    color: #606266;
    width: 100%!important;
  }
  .management-tree{
    width: 100%;
    .tree-form{
      display: flex;
      justify-content: flex-start;
      .tree-box{
        width:40%;
      }
      .form-box{
        width: 60%;
        display: flex;
        justify-content: center;
        .form-box-item{
          width: 70%;
          display: flex;
          justify-content: flex-start;
          flex-direction: column;
          .dialog-footer{
            display: flex;
            justify-content: flex-end;
          }
        }
      }
    }
    .custom-tree-node {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      padding-right: 8px;
    }
  }
</style>